<template>
  <fragment>
    <!-- 竖-右 -->
    <div
      class="legend"
      :style="{
      height: height+'px',
    }"
      v-if="arrayStyle === 'vertical' && numPosition_vert === 'right'"
    >
      <div
        class="cube"
        :style="{
      background: listData.color, 
      width: width+'px', 
      height: height+'px',
      }"
        :class="{lastCube: listData.num === 0}"
      ></div>
      <span
        class="num"
        :style="{
        marginLeft: numPosition_vert === 'right' ? '5px' : '0px',
        lineHeight: numStyle === 'center' ? height + 'px' : '40px',
      }"
      >{{ listData.num }}</span>
    </div>
    <!-- 竖-左 -->
    <div
      class="legend"
      :style="{
      height: height+'px',
    }"
      v-else-if="arrayStyle === 'vertical' && numPosition_vert === 'left'"
    >
      <span
        class="num"
        :style="{
        lineHeight: numStyle === 'center' ? height + 'px' : '40px',
        transform: numPosition_vert === 'left' ? `translateX(-100%)` : '0px',
      }"
      >{{ listData.num }}</span>
      <div
        class="cube"
        :style="{
      background: listData.color, 
      width: width+'px', 
      height: height+'px',
      marginLeft: numPosition_vert === 'left' ? '5px' : '0px',
      }"
        :class="{lastCube: listData.num === 0}"
      ></div>
    </div>
    <!-- 横-上 -->
    <div
      class="legend"
      :style="{
      height: height+'px',
      display: 'inline-block'

    }"
      v-else-if="arrayStyle === 'horizontal' && numPosition_hori === 'top'"
    >
      <span
        class="num num_hori_bottom"
        :style="{
        lineHeight: '14px',
        width: numStyle === 'center' ? width+'px' : '',
        top: -5 + 'px'
      }"
        :class="{
          num_hori_caliper: numStyle === 'caliper',
          num_hori_center: numStyle === 'center',
        }"
      >{{ listData.num }}</span>
      <div
        class="cube_hori"
        :style="{         
          background: listData.color, 
          width: width+'px', 
          height: height+'px',
        }"
      ></div>
    </div>
    <!-- 横-下 -->
    <div
      class="legend"
      :style="{
      height: height+'px',
      display: 'inline-block'

    }"
      v-else-if="arrayStyle === 'horizontal' && numPosition_hori === 'bottom'"
    >
      <div
        class="cube_hori"
        :style="{      
          background: listData.color, 
          width: width+'px', 
          height: height+'px',
        }"
      ></div>
      <span
        class="num num_hori_bottom"
        :style="{
        lineHeight: '14px',
        width: numStyle === 'center' ? width+'px' : '',
        top: height + 5 + 'px'
      }"
        :class="{
          num_hori_caliper_bottom: numStyle === 'caliper',
          num_hori_center_bottom: numStyle === 'center',
        }"
      >{{ listData.num }}</span>
    </div>
  </fragment>
</template>

<script>
import { mapState, mapGetters } from "vuex";
export default {
  props: ["listData"],
  mounted() {
    // console.log(this);
  },
  computed: {
    ...mapState([
      "numStyle",
      "arrayStyle",
      "numPosition_vert",
      "numPosition_hori",
      "width",
      "height"
    ])
  }
};
</script>

<style>
.legend {
  position: relative;
  box-sizing: border-box;
}
.legend .cube {
  border: 1px solid;
  border-bottom: none;
  display: inline-block;
  box-sizing: border-box;
}
.legend .lastCube {
  border-bottom: 1px solid;
}
.legend .cube_hori {
  border: 1px solid;
  border-right: none;
  display: inline-block;
  box-sizing: border-box;
}
.legend .lastCube_hori {
  border-right: 1px solid;
}
.num {
  position: fixed;
  font-family: MicrosoftYaHei;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 40px;
  letter-spacing: 0px;
  color: #000000;
}
.num_hori_caliper {
  transform: translate(-50%, -100%);
}
.num_hori_center {
  text-align: center;
  transform: translate(0, -100%);
}
.num_hori_bottom {
  position: absolute;
  left: 0;
}
.num_hori_caliper_bottom {
  transform: translateX(-50%);
}
.num_hori_center_bottom {
  text-align: center;
}
</style>